Navigation APIがlib.dom.d.tsに採用されるまでの道のり
https://2026.tskaigi.org/talks/33.png
しかしこのような最新のWeb APIを使おうとしたら型が未定義で、自らinterface Windowを拡張した経験は皆さんはありませんか？
本セッションでは、Navigation APIの概要を紹介しつつ、普段何気なく利用しているDOM APIがどのようなフローでTypeScriptでの型定義（lib.dom.d.ts）に採用されるのかを解説します。 この発表を通じて、Web標準の技術が「型」として届けられるまでの裏側を知り、最新技術をより安全かつ深く理解して扱えるようになることを目指します。 トーク概要
今日の持ち帰れる内容の説明
ページ遷移時の読み込み処理が入るので「遷移していること」が明示的になった ナビゲーションにはformの送信も含まれるので送信処理のときに差し込んだりページ離脱前の確認処理も差し込めたりする @types/webを使用する
TypeScript 4.5以降のlib replacement機能を使用してインストール
code:sh
pnpm add -D @typescript/lib-dom@npm:@types/web
パッケージに存在しない場合
自前でinterface Windowで拡張・パッケージ化
@ts-ignoreにて一時的に無視・回避
参考
src/build/bcd.tsで@mdn/browser-compat-dataよりブラウザ互換性のデータを使用 基準
If there is, see the browser compatibility section and check whether it's supported by two or more browser engines. (Note that Chromium-based browsers use the same browser engine and thus support from them counts as a single support.)
code:ts
function hasMultipleImplementations(support: SupportBlock, prefix?: string) {
const hasStableImpl = (
browser: SimpleSupportStatement | SimpleSupportStatement[] | undefined,
) => hasStableImplementation(browser, prefix);
let count = 0;
if (hasStableImpl(support.chrome) || hasStableImpl(support.chrome_android)) {
count += 1;
}
if (
hasStableImpl(support.firefox) ||
hasStableImpl(support.firefox_android)
) {
count += 1;
}
if (hasStableImpl(support.safari) || hasStableImpl(support.safari_ios)) {
count += 1;
}
return count >= 2;
}
Web IDLファイルの変更履歴（Blame view）からバージョンを特定 src/build.tsにて@webref/*のWeb仕様関連のパッケージにて型定義を生成するためのデータソースとして使用されている table:table
パッケージ 用途 データ内容
@webref/idl WebIDL仕様の取得 Web APIのインターフェース定義
@webref/css CSS仕様の取得 CSS関連の型定義
@webref/events イベント仕様の取得 イベントとインターフェースのマッピング
@webref/elements HTML要素の取得 HTML要素とインターフェースのマッピング
table:公開されているnpmパッケージ
パッケージ名 説明 対象コンテキスト
@types/web DOMおよびWeb技術の型 Window/メインスレッド
@types/serviceworker Service Workerのグローバルスコープの型 Service Worker
@types/audioworklet Audio Workletのグローバルスコープの型 Audio Worklet
@types/sharedworker Shared Workerのグローバルスコープの型 Shared Worker
@types/webworker Web Workerのグローバルスコープの型 Web Worker
https://gyazo.com/6105e4e37e9bea60d13e8d2487ee8bd9
パッケージの公開フロー
@yamanoku: TypeScript 6.0からDOM APIを最新の情報に追従していく流れで、Navigation APIの型定義がTypeScript 6.0から正式に使えるようになっています🥳 クライアントルーティングライブラリのNavigation API採用の足掛けになるといいなと思っています🙌
https://pbs.twimg.com/media/HCzRAataYAADuYI.jpg